import React, { Component } from 'react';
import { Form, Input, Button, Toast } from 'antd-mobile'
import '../styles/Register.scss'
import * as service from '../api/index'

class Register extends Component {
    async zhuce() {
        var res = await this.refs.formRef.validateFields()
        var res1 = await service.user_user()
        var i = res1.data.find((item) => {
            return item.phone == res.phone
        })
        if (i) {
            Toast.show({
                icon: 'fail',
                content: '账号已存在',
            })

        } else {
            var res2 = await service.user_list(res)
            Toast.show({
                icon: 'success',
                content: '注册成功',
            })
        }
    }
    render() {
        return (
            <div className='register'>
                <Form layout='horizontal'
                    ref='formRef'
                    footer={
                        <Button block type='submit' color='primary' size='large' onClick={() => { this.zhuce() }}>
                            注册
                        </Button>
                    }>
                    <Form.Header>注册页面</Form.Header>
                    <Form.Item
                        name='phone'
                        label='用户名'
                        rules={[{ required: true, message: '用户名不能为空' }]}
                    >
                        <Input type='text' placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item
                        name='pass'
                        label='密码'
                        rules={[{ required: true, message: '密码不能为空' }]}
                    >
                        <Input type='password' placeholder='请输入密码' />
                    </Form.Item>
                </Form>
                <div className='zi' onClick={() => { this.props.history.push('/login') }}>登录</div>
            </div>
        );
    }
}

export default Register;